<template>
  <div class="app-container">
    <div>
      <!-- 条件栏 -->
      <PageFilter
        v-model:query="filterInfo.query"
        :filter-list="filterInfo.list"
      >
        <template v-slot:filter-fiscalPeriodStart>
          <el-input
            v-model="filterInfo.query.fiscalPeriodStart"
            class="not-mongolia"
            type="input"
            :required="true"
            :disabled="true"
            :placeholder="'请选择会计期间'"
            style="width: 180px"
          >
            <template #append>
              <el-icon @click="checkFiscalPeriodStart()"
                ><MoreFilled
              /></el-icon>
            </template>
          </el-input>
          ~
          <el-input
            v-model="filterInfo.query.fiscalPeriodEnd"
            class="not-mongolia"
            type="input"
            :required="true"
            :disabled="true"
            style="width: 180px"
            :placeholder="'请选择会计期间'"
          >
            <template #append>
              <el-icon @click="checkFiscalPeriodEnd()"><MoreFilled /></el-icon>
            </template>
          </el-input>
        </template>
      </PageFilter>

      <!-- 表格 -->
      <TableContainer
        :refresh="tableInfo.refresh"
        :init-curpage="tableInfo.initCurpage"
        :pageTotal="pageInfos.pageTotal"
        v-model:data="tableInfo.data"
        :tab-index="false"
        :check-box="false"
        :summary="true"
        :summary-field-list="tableInfo.summaryFieldList"
        v-model:query="filterInfo.query"
        :field-list="tableInfo.fieldList"
        :api="tableInfo.api"
      >
      </TableContainer>
    </div>
    <SelectFiscalPeriod
      v-if="selectFiscalPeriodInfo.startVisible"
      v-model:show-dialog="selectFiscalPeriodInfo.startVisible"
      :save-empty="true"
      :check-box="false"
      :highlight-row="true"
      :query="selectFiscalPeriodInfo.startQuery"
      @callback="callBackSelectFiscalPeriodStart"
    />
    <SelectFiscalPeriod
      v-if="selectFiscalPeriodInfo.endVisible"
      v-model:show-dialog="selectFiscalPeriodInfo.endVisible"
      :save-empty="true"
      :check-box="false"
      :highlight-row="true"
      :query="selectFiscalPeriodInfo.endQuery"
      @callback="callBackSelectFiscalPeriodEnd"
    />
  </div>
</template>

<script setup name="purchaseSalesStockIn">
import { fatchTemplateByCode } from '@/api/base'
import {
  selectPurchaseSalesStockIn,
  exportPurchaseSalesStockIn,
  printPurchaseSalesStockIn,
} from '@/api/dataQuery.js'
const { proxy } = getCurrentInstance()
const filterInfo = ref({
  query: {
    inventoryCategories: 1,
    fiscalPeriodStart: '',
    fiscalPeriodEnd: '',
  },
  list: [
    {
      type: 'select-model',
      label: '库存类别',
      value: 'inventoryCategories',
      code: 'inventory_categories',
      event: search,
    },
    {
      label: '操作时间',
      value: 'fiscalPeriodStart',
      type: 'slot',
    },
    { type: 'button', label: '搜索', event: search },
    { type: 'button', label: '打印', event: print, show: true },
    {
      type: 'button',
      label: '导出excel',
      event: exportExcel,
      show: true,
    },
  ],
})
const selectFiscalPeriodInfo = ref({
  startVisible: false,
  endVisible: false,
  startQuery: { fiscalType: 1, startDateEqAndLes: '' },
  endQuery: { fiscalType: 1, startDateEqAndGre: '' },
})
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  data: [],
  api: null,
  selections: [],
  fieldList: [
    { label: '供应商', value: 'supplierName', type: 'column' },
    { label: '小计', value: 'sumAmount', type: 'column' },
  ],
  summaryFieldList: [
    { value: 'sumAmount', formatter: proxy.$fn.TripartiteMethod },
  ],
})
const pageInfos = ref({
  pageSize: 20,
  curPage: 1,
  pageTotal: 0,
})
function checkFiscalPeriodStart() {
  selectFiscalPeriodInfo.value.startVisible = true
}
function checkFiscalPeriodEnd() {
  selectFiscalPeriodInfo.value.endVisible = true
}
function callBackSelectFiscalPeriodEnd(data) {
  if (data && data.id) {
    selectFiscalPeriodInfo.value.startQuery.startDateEqAndLes = data.startDate
    filterInfo.value.query.fiscalPeriodEnd = data.name
    filterInfo.value.query.fiscalPeriodStart = filterInfo.value.query
      .fiscalPeriodStart
      ? filterInfo.value.query.fiscalPeriodStart
      : data.name
  } else {
    filterInfo.value.query.fiscalPeriodEnd = ''
    selectFiscalPeriodInfo.value.startQuery.startDateEqAndLes = ''
  }
}
function callBackSelectFiscalPeriodStart(data) {
  if (data && data.id) {
    filterInfo.value.query.fiscalPeriodStart = data.name
    filterInfo.value.query.fiscalPeriodEnd = filterInfo.value.query
      .fiscalPeriodEnd
      ? filterInfo.value.query.fiscalPeriodEnd
      : data.name
    selectFiscalPeriodInfo.value.endQuery.startDateEqAndGre = data.startDate
  } else {
    filterInfo.value.query.fiscalPeriodStart = ''
    selectFiscalPeriodInfo.value.endQuery.startDateEqAndGre = ''
  }
}
function getList() {
  tableInfo.value.api = selectPurchaseSalesStockIn
  tableInfo.value.refresh = Math.random()
}
function search() {
  filterInfo.value.query.inventoryCategories =
    filterInfo.value.query.inventoryCategories &&
    parseInt(filterInfo.value.query.inventoryCategories)
  tableInfo.value.initCurpage = Math.random()
  tableInfo.value.refresh = Math.random()
}
//打印
function print() {
  fatchTemplateByCode({
    resourceCode: 'purchaseSalesStockIn:print',
    isDefault: 1,
  }).then((res) => {
    if (res && res.success) {
      let temp = proxy.$fn.getPrintTemp(res.data[0])
      getPrintData(temp)
    }
  })
}
function getPrintData(temp) {
  let params = {
    ...filterInfo.value.query,
  }
  printPurchaseSalesStockIn(params).then((res) => {
    if (res.success && res) {
      let data = proxy.$fn.deepClone(res.data)
      let newData = data.map((item) => {
        return {
          ...item,
          ...item.orderInfo,
        }
      })
      proxy.$lodop.preview(temp, newData)
    }
  })
}
function exportExcel() {
  exportPurchaseSalesStockIn(
    proxy.$fn.delEmptyAttribute(filterInfo.value.query)
  ).then((resp) => {
    if (resp) {
      proxy.$fn.parseExcel(resp)
    }
  })
}
function initTableColumns() {
  let data = {}
  if (tableInfo.value.data.length) {
    data = Object.assign(data, ...tableInfo.value.data[0].dataList)
  }
  // 获取动态表头
  const dataList = Object.keys(data)
  // 动态设置表格列
  tableInfo.value.fieldList = [
    { label: '供应商', value: 'supplierName', type: 'column' },
    { label: '小计', value: 'sumAmount', type: 'column' },
  ]
  dataList.forEach((item) => {
    const column = { label: item, value: item, type: 'column' }
    const field = { value: item, formatter: proxy.$fn.TripartiteMethod }
    tableInfo.value.fieldList.splice(
      tableInfo.value.fieldList.length - 1,
      0,
      column
    )
    tableInfo.value.summaryFieldList.splice(
      tableInfo.value.fieldList.length - 1,
      0,
      field
    )
  })
  formmatTableData()
}
// 合并多级数据
function formmatTableData() {
  tableInfo.value.data.forEach((item) => {
    item = Object.assign(item, ...item.dataList)
  })
}
watch(
  () => tableInfo.value.data,
  (val) => {
    initTableColumns()
  },
  {
    deep: true,
  }
)

onMounted(() => {
  getList()
})
</script>

<style scoped></style>
